<template>
    <div>
        <el-row>
            <el-col :span="24" class="check_bill_int">
                <!-- 输入就筛选 @input="intContent()" -->
                <el-input placeholder="业务员/渠道代理/订单处理员" v-model="form.searchBoxValue" clearable @clear="inputChoose()"></el-input>
                <el-button type="primary" size="small" @click="inputChoose()">搜索</el-button>
            </el-col>
            <el-col :span="24">
                <FiltrateTemplate
                        :templateSource="this.filterSource"
                        @changeChannelAgentFun="changeChannelAgentFun"
                        @changeAcceptFun="changeAcceptFun"
                        @changePriceFun="changePriceFun"
                        @changePriceConfirmFun="changePriceConfirmFun"
                        @changePriceClearFun="changePriceClearFun"
                        @changeTimeFun="changeTimeFun"
                        @changeTimeComfirmFun="changeTimeComfirmFun"
                        @changeSalesmanAffiliationFun="changeSalesmanAffiliationFun"
                        @changeUserIdFun="changeUserIdFun"
                        @changeflistOrderFun="changeflistOrderFun"
                        @changePayerFun="changePayerFun"
                        @changeOrderStatusIdFun="changeOrderStatusIdFun"
                        @changeCheckTimeFun="changeCheckTimeFun"
                        @changeCheckTimeComfirmFun="changeCheckTimeComfirmFun"
                        @changeCheckTimeClearFun="changeCheckTimeClearFun"
                        @clearAllChooseFun="clearAllChooseFun"
                        @closeTagFun="closeTagFun">
                </FiltrateTemplate>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="order_number" label="订单号"> </el-table-column>
            <!--<el-table-column label="是否首单">-->
                <!--<template slot-scope="scope">-->
                    <!--<span :class="{'tableRed':scope.row.firstOrder == '是'}">-->
                        <!--{{scope.row.firstOrder}}</span>-->
                <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column prop="bill_sum_price" label="票面金额(万元)" width="143"> </el-table-column>
            <el-table-column prop="acceptor_type_name" label="承兑机构"> </el-table-column>
            <el-table-column prop="acceptor_name" label="承兑人"> </el-table-column>
            <el-table-column label="到期时间" width="124">
                <template slot-scope="scope">
                    <span>{{scope.row.deadline_time_Y}}</span><br/><span v-if="scope.row.days > 0">(剩余{{scope.row.days}}天)</span>
                </template>
            </el-table-column>
            <el-table-column prop="order_rate" label="成交利率"> </el-table-column>
            <el-table-column label="成交时间" width="124">
                <template slot-scope="scope">
                    <span>{{scope.row.order_time_Y}}</span><br/><span>{{scope.row.order_time_H}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="receiver_commission" label="手续费(元)"> </el-table-column>
            <el-table-column prop="receiver_commission" label="平台手续费(豆)" width="120"> </el-table-column>
            <el-table-column prop="order_status_name" label="票据状态"> </el-table-column>
            <el-table-column prop="channel_agent" label="渠道代理"> </el-table-column>
            <el-table-column prop="salesman_affiliation" label="业务员归属"> </el-table-column>
            <el-table-column prop="username" label="客服"> </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="orderDetail(scope.row.order_id)"><i class="iconfont icon-xiangqing icon_edit_style"></i> 详细</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="right clear">
            <el-pagination
                    @size-change="onSizeChange"
                    @current-change="onFlipOver"
                    :current-page="pagination.currentPage"
                    :page-sizes="pagination.pageSizes"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>

        <DialogContent ref="orderDetailDialog" title="订单详情">
            <OrderDetail :orderDetailModel="this.orderDetailModel" :orderStep="this.orderStep" :orderTime="this.orderTime"></OrderDetail>
            <span slot="Remfooter" class="submit-btn">
                <el-button type="info" size="small" @click="closeDialog()">关闭</el-button>
            </span>
        </DialogContent>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import Pagination from "@/types/Pagination";
    import FiltrateTemplate from '@common/FiltrateTemplate.vue';
    import OrderDetail from '@common/OrderDetail.vue';
    import _ from 'lodash';
    import moment from 'moment';
    import DialogContent from '@common/DialogContent.vue';
    @Component({
        extends: Pagination,
        components: {
            FiltrateTemplate,
            OrderDetail,
            DialogContent
        }
    })
    export default class OrderQuery extends Vue {
        tableData = []
        filterSource: string = 'orderQuery';
        orderDetailModel: any = {};
        isIntPrice: boolean = true
        orderTime: any = {
            order_status_804: '',
            order_status_806: '',
            order_status_807: '',
            order_status_808: '',
        };
        form = {
            channelAgent: '',
            acceptorType: '',
            salesmanAffiliation: '',
            userId: '',
            flistOrder: '',
            billStyleId: '',
            orderStatusId: '',
            billSumPriceType: '',
            searchBoxValue: ''
        }
        filterCondition = {
            billPrice: { min: '', max: '', gtoe: false, ltoe: false },
            expiresDays: { min: '', max: '', gtoe: false, ltoe: false },
            checkTimes: { min: '', max: '', gtoe: false, ltoe: false },
        }
        orderStep: string | number = 0;
        async getOrderQueryList () {
            let sendCheckDays: string = ''
            if(this.filterCondition.checkTimes.min == '' && this.filterCondition.checkTimes.max == ''){
                sendCheckDays = ''
            } else {
                if(this.filterCondition.checkTimes.max == '+∞'){
                    this.filterCondition.checkTimes.max = '';
                }
                sendCheckDays = this.filterCondition.checkTimes.min + ',' + this.filterCondition.checkTimes.max;
            }

            let params = {
                currentPage: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
                channelAgent: this.form.channelAgent,
                acceptorTypeId: this.form.acceptorType,
                billSumPriceMin: this.filterCondition.billPrice.min,
                billSumPriceMax: this.filterCondition.billPrice.max == '+∞' ? '' : this.filterCondition.billPrice.max,
                billSumPriceType: '',
                deadlineTimeMin: this.filterCondition.expiresDays.min,
                deadlineTimeMax: this.filterCondition.expiresDays.max,
                salesmanAffiliation: this.form.salesmanAffiliation,
                userId: this.form.userId,
                isFirst: this.form.flistOrder,
                billStyleId: this.form.billStyleId,
                orderStatusId: this.form.orderStatusId,
                searchBoxValue: '',
                orderTime: sendCheckDays
            }
            let res = await this.$http.post('orders/order/statList', params)
            if (res.status == 200) {
                let { orders, page_info } = res.data;
                orders.forEach((i) => {
                    i.order_time_Y = moment(i.order_time).format('YYYY-MM-DD')
                    i.order_time_H = moment(i.order_time).format('HH:mm:ss')
                    i.deadline_time_Y = moment(i.deadline_time).format('YYYY-MM-DD')
                    // i.deadline_time_T = i.deadline_time.substr(10, i.deadline_time.length)
                })
                this.tableData = orders;
                this.pagination.total = page_info.items_number;
            }
        }

        orderDetail (id) {
            this.getOrderDetail(id);
        }
        async getOrderDetail (orderId: string|number) {
            let res = await this.$http.get(`orders/order/${orderId}`)
            if(res.status == 200){
                this.orderDetailModel = res.data;
                this.orderDetailModel.bill_deadline_time = moment(this.orderDetailModel.bill_deadline_time).format('YYYY-MM-DD');
                if (res.data.bill_back_files.length != 0) {
                    if (res.data.bill_back_files.length == 1){
                        this.orderDetailModel.bill_back_photo_path1 = res.data.bill_back_files[0].file_path;
                        this.orderDetailModel.bill_back_photo_path2 = '';
                    }else if(res.data.bill_back_files.length == 2){
                        this.orderDetailModel.bill_back_photo_path1 = res.data.bill_back_files[0].file_path;
                        this.orderDetailModel.bill_back_photo_path2 = res.data.bill_back_files[1].file_path;
                    } else {
                        this.orderDetailModel.bill_back_photo_path1 = '';
                        this.orderDetailModel.bill_back_photo_path2 = '';
                    }
                }
                switch (res.data.order_time_map.time.length)
                {
                    case 1:
                        this.orderStep = 0;
                        this.orderTime.order_status_804 = res.data.order_time_map.time[0].TIME;
                        break;
                    case 2:
                        this.orderStep = 1;
                        this.orderTime.order_status_804 = res.data.order_time_map.time[0].TIME;
                        this.orderTime.order_status_806 = res.data.order_time_map.time[1].TIME;
                        break;
                    case 3:
                        this.orderStep = 2;
                        this.orderTime.order_status_804 = res.data.order_time_map.time[0].TIME;
                        this.orderTime.order_status_806 = res.data.order_time_map.time[1].TIME;
                        this.orderTime.order_status_807 = res.data.order_time_map.time[2].TIME;
                        break;
                    case 4:
                        this.orderStep = 3;
                        this.orderTime.order_status_804 = res.data.order_time_map.time[0].TIME;
                        this.orderTime.order_status_806 = res.data.order_time_map.time[1].TIME;
                        this.orderTime.order_status_807 = res.data.order_time_map.time[2].TIME;
                        this.orderTime.order_status_808 = res.data.order_time_map.time[3].TIME;
                        break;
                }
                this.$refs['orderDetailDialog'].openDialog();
            }
        }

        filterFunction (filterForm: any) {
            this.pagination.currentPage = 1
            this.form = filterForm.filterModel;
            this.filterCondition = filterForm.filterCondition;
            this.getOrderQueryList();
        }
        // 渠道代理
        changeChannelAgentFun (data) {
            this.filterFunction(data);
        }
        // 承兑机构
        changeAcceptFun (data) {
            this.filterFunction(data)
        }
        // 切换票面金额
        changePriceFun (data) {
            this.filterFunction(data)
        }
        // 票面金额 -- 输入
        changePriceConfirmFun (data) {
            this.form.billSumPriceType = '10'
            this.filterFunction(data)
        }
        // 票面金额 -- 输入清空
        changePriceClearFun (data) {
            this.form.billSumPriceType = ''
            this.filterFunction(data)
        }
        // 切换到期时间
        changeTimeFun (data) {
            this.filterFunction(data)
        }
        // 输入到期时间
        changeTimeComfirmFun (data) {
            this.filterFunction(data)
        }
        // 清空到期时间
        changeTimeClearFun (data) {
            this.filterFunction(data)
        }
        // 业务员归属
        changeSalesmanAffiliationFun (data) {
            this.filterFunction(data)
        }
        // 处理人员
        changeUserIdFun (data) {
            this.filterFunction(data)
        }
        // 是否首单
        changeflistOrderFun (data) {
            this.filterFunction(data)
        }
        // 支付方
        changePayerFun (data) {
            this.filterFunction(data)
        }
        // 票据状态
        changeOrderStatusIdFun (data) {
            this.filterFunction(data)
        }
        closeTagFun (data) {
            this.filterFunction(data)
        }
        clearAllChooseFun (data) {
            this.filterFunction(data)
        }
        // 统计时间切换
        changeCheckTimeFun (data) {
            this.filterFunction(data)
        }
        // 统计时间 -- 输入
        changeCheckTimeComfirmFun (data) {
            this.filterFunction(data)
        }
        // 统计时间 -- 输入（清空）
        changeCheckTimeClearFun (data) {
            this.filterFunction(data)
        }
        // 表单输入点击筛选
        inputChoose () {
            this.getOrderQueryList()
        }

        closeDialog () {
            this.$refs['orderDetailDialog'].closeDialog();
        }
        loadDataForPagination() {
            this.getOrderQueryList()
        }
        mounted () {
            this.getOrderQueryList();
        }
    }
</script>

<style scoped>

</style>